import React from 'react';
import Api from '../api/address-api.js';
import Util from '../../common/util.js';

var scope;
export default class AreaBox extends React.Component {

    constructor(props) {
        super(props);
        scope = this;
        var areaList = [];
        var selectedArea;
        if (props.type == 'mod') {
            var address = Util.storage().get('address');
            areaList = Api.getAreaListByArea(address);
            selectedArea = Api.getAddressArea(address);
        } else {
            areaList = Api.getDefaultAreaList();
            selectedArea = {
                province: '省份',
                city: '城市',
                district: '区县'
            };
        }
        scope.state = {
            selectedArea: selectedArea,
            provinces: areaList.provinces,
            cities: areaList.city,
            districts: areaList.districts,
            isOpen: props.isOpen,
            selected: {
                province: false,
                city: false,
                district: false
            }
        };
    };

    componentWillReceiveProps(nextProps) {
        var selected = scope.state.selected;
        selected.province = selected.province ? false : true;
        if (!nextProps.isOpen) {
            return;
        }
        scope.setState({
            isOpen: scope.props.isOpen ? false : true,
            selected: selected
        });
    };

    areaBoxHeader() {
        return (
            <div>
                <h3>收货地址</h3>
                <div className="selectNav">
                    <div><p className={scope.state.selected.province ? 'active' : ''}
                            onClick={scope.openArea.bind(this,'province')}>{!scope.state.selectedArea.province ? '省份' : scope.state.selectedArea.province}</p>
                    </div>
                    <div><p className={scope.state.selected.city ? 'active' : ''}
                            onClick={scope.openArea.bind(this,'city')}>{!scope.state.selectedArea.city ? '城市' : scope.state.selectedArea.city}</p>
                    </div>
                    <div><p className={scope.state.selected.district ? 'active' : ''}
                            onClick={scope.openArea.bind(this,'district')}>{!scope.state.selectedArea.district ? '区县' : scope.state.selectedArea.district}</p>
                    </div>
                </div>
            </div>
        );
    };

    openArea(key) {
        var selected = scope.state.selected;
        for (var i in selected) {
            selected[i] = false;
        }
        selected[key] = true;
        scope.setState(selected);
    };

    areaBoxBody() {
        return (
            <div className="selectList">
                <div className={"province " + (scope.state.selected.province ? 'show' : 'hidden')}>
                    <ul>
                        {scope.state.provinces.map(function (obj, i) {
                            return <li key={i} className={obj.selected ? 'active' : ''}
                                       onClick={scope.select.bind(scope,obj,'province','city','provinces','city','cities')}>{obj.area_name}</li>;
                        })}
                    </ul>
                </div>
                <div className={"city " + (scope.state.selected.city ? 'show' : 'hidden')}>
                    <ul>
                        {scope.state.cities.map(function (obj, i) {
                            return <li key={i} className={obj.selected ? 'active' : ''}
                                       onClick={scope.select.bind(scope,obj,'city','district','cities','district','districts')}>{obj.area_name}</li>;
                        })}
                    </ul>
                </div>
                <div className={"county " + (scope.state.selected.district ? 'show' : 'hidden')}>
                    <ul>
                        {scope.state.districts.map(function (obj, i) {
                            return <li key={i} className={obj.selected ? 'active' : ''}
                                       onClick={scope.select.bind(scope,obj,'district',null,'districts',null)}>{obj.area_name}</li>;
                        })}
                    </ul>
                </div>
            </div>
        );
    };

    select(area, areaKey, areaNextKey, current, next, nextArrayKey) {
        var selectArea = scope.state.selectedArea;
        for (var i in selectArea) {
            if (i == areaNextKey) {
                selectArea[i] = null;
            }
           if(i == areaKey){
               selectArea.area_id = area.area_id;
                selectArea[i] = area.area_name;
            }
        }
        scope.setState(selectArea);

        var currentArray = scope.state[current];
        for (var i = 0; i < currentArray.length; i++) {
            currentArray[i].selected = false;
            if (area.area_id == currentArray[i].area_id) {
                currentArray[i].selected = true;
            }
        }
        ;

        var obj = {};
        obj[current] = currentArray;
        scope.setState(obj);

        if (!next) {
            return;
        }

        var selected = scope.state.selected;
        for (var i in selected) {
            selected[i] = false;
            if (i == next) {
                selected[i] = true;
            }
        }
        ;
        scope.setState(selected);

        var nextArray = Api.getChildAreaList(area.area_id);
        var nextObj = {};
        nextObj[nextArrayKey] = nextArray;
        scope.setState(nextObj);
    };

    render() {
        return (
            <div className={"addressBox " + (scope.state.isOpen ? 'show' : 'hidden')}>
                <div className="selectBox">
                    {scope.areaBoxHeader()}
                    {scope.areaBoxBody()}
                    <div className="closeSelect" onClick={scope.close.bind(this,'isOpen')}><img src="images/la.png" alt=""/></div>
                </div>
            </div>
        );
    };

    close() {
        scope.setState({
            isOpen: scope.state.isOpen ? false : true
        });
        scope.props.openAreaBoxCallback(scope.state.selectedArea);
    };
};